@font-face {
    font-family: Candara; 
    src: local("Candara"), 
         url(font/Candara.ttf); 
}

@font-face {
    font-family: Alexandra; 
    src: local("Alexandra Zeferino Three"), 
         url(font/Alexandra.ttf); 
}

@font-face {
    font-family: Myriad Pro; 
    src: local("Myriad Pro"), 
         url(font/MyriadPro-Regular.ttf); 
}

html{
	background-color: black;	
	overflow: hidden;
}

body{
	-webkit-transform: scale(1);
	-webkit-transform-origin: 0% 0%;
	margin: 0;
	/*width: 768px;
	height: 1024px;	*/
}

.scale{
	-webkit-transform-origin: 0% 0%;
	position: absolute;
	width: 1536px;
	height: 2048px;	
}

.scaleX{
	-webkit-transform-origin: 0% 0%;
}

.bottom{
	position: absolute;
	width: 1536px;
	height: 2048px;
}

.page{
	-webkit-transform-origin: 0% 0%;
	position: absolute;
	/*
	width: 768px;
	height: 1024px;
	*/
	width: 100%;
	height: 100%;
	display: none;
}

.page.active{
	display: block;
}

input.enter_player{
	/*float: left;
	width: 910px;
	border: none;
	padding: 19px 30px;
	background: url(../img2/edit_name.png) no-repeat 0 0;
	font: bold 50px Candara;
	*/
	width: 900px;
	height: 80px;
	padding-left: 30px;
	border-width: 2px; 
	border-style: solid;
	border-color: #3E2213; 
	background-color: rgba(254, 254, 254, 0.36);	
	-webkit-box-shadow: 5px 5px 10px 0px rgba(3,3,4,0.2);
	font: bold 50px Candara;
	color: black;
	line-height: 80px;
	margin-top: 16px;	
}


.settings_name{
	width: 900px;
	height: 80px;
	padding-left: 30px;
	border-width: 2px; 
	border-style: solid;
	border-color: #3E2213; 
	background-color: rgba(254, 254, 254, 0.36);	
	-webkit-box-shadow: 5px 5px 10px 0px rgba(3,3,4,0.2);
	font: bold 50px Candara;
	color: black;
	line-height: 80px;
}

.edit_settings{
	width: 227px;
	height: 80px;
	border-width: 2px; 
	border-style: solid;
	border-color: #613B1C; 
	text-align: center;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(3,3,4,0.2);
	background-image: 
		-webkit-linear-gradient(
			left, 
			rgba(248,194,80, 0.36) 0%, 
			rgba(199,140,51, 0.36) 50%, 
			rgba(154,91,30, 0.36) 100%
		);	
	font: bold 50px Candara;
	color: black;
	line-height: 70px;
}

.edit_settings.select{
	background-image: 
		-webkit-linear-gradient(
			left, 
			rgba(248,194,80, 1) 0%, 
			rgba(199,140,51, 1) 50%, 
			rgba(154,91,30, 1) 100%
		);
	/*margin-top: -20px;
	background: url(../img2/edit_settings_select.png) no-repeat 0 0;*/
}

input.enter_word{
	width: 1140px;
	border: none;
	padding: 40px 20px;
	background: url(../img2/edit_word.png) no-repeat 0 0;
	text-align: center;
	font: bold 92px Candara;
	
	-webkit-transition: -webkit-transform 0.3s linear;
	-webkit-transform-origin: 0px 0px;	
}

input:focus {
	outline: none;
}

.radio{
	float: left;
	margin-left: 52px;
	margin-top: 8px;
}
.radio-men{
	height: 92px;
	width: 102px;
	background: url(../img2/radio_men.png) no-repeat 0 0;
}
.radio-women{
	height: 92px;
	width: 102px;
	background: url(../img2/radio_women.png) no-repeat 0 0;
}

.radio-active{
	background-position: 0px -92px;
}

#player_name{
	font: bold 100px Candara;
	color: white;
	width: 1000px;
}

.word{
	position: absolute; 
	top: 696px; 
	left: 314px;
	width: 898px;
	height: 440px;
	 
	-webkit-transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform 0.4s ease;
	background: url(../img2/word.png) no-repeat 0 0;
	text-align: center;
}

.word-text{
	position: relative; 
	top: 120px;
	color: #4D4D4D;
	font: 140px Alexandra;
}

#game_txt_time{
	color: #B6792A;
	font: 144px Alexandra;	
	width: 220px; 
	text-align: center;
}

.player_box{
	position: absolute; 
	width: 480px;
	height: 110px;
	border-radius: 20px;
	padding: 10px;
	background-color: rgba(100%, 0%, 0%, 0.5);
}

.team_index{
	float: left;
	width: 106px;
	height: 106px;
	border-radius: 10px;
	background-color: #ff0000;
	border-width:2px;
	border-style:solid;
	border-color:#fff;
	text-align: center;
	font: 88px Myriad Pro;
	margin-right: 10px;
	opacity: 0.3;
}

.team_index.active{
	opacity: 1;
}

.player_box span{
	float: left;
	font: 50px Arial;
	color: white;
	word-wrap: break-word;
	width: 340px;	
}

#boxCurPlayer{
	opacity: 1;
	-webkit-transition: opacity 1s linear;
}

#boxCurPlayer.active{
	opacity: 0;
}

.team{
	text-align: center;
	width: 280px;
	margin: 38px 0px;
}

.team div{
	width: 106px; 
	height: 106px; 
	border-radius: 10px; 
	background-color: #ff0000; 
	margin: 0px auto;
}

.team span{
	font: bold 50px Candara;
}

.button{
	-webkit-transform-origin: 50% 50%;
	-webkit-transition: -webkit-transform 0.2s ease;
	-webkit-transform: scale(1);
}

.button.active{
	-webkit-transform: scale(0.8);
}

.star{
	-webkit-transition: opacity 1s ease;
	opacity: 1;
}

.star.active{
	opacity: 0;
}

.light{
	-webkit-transition: opacity 1s ease;
	opacity: 1;
}

.light.active{
	opacity: 0;
}

.sound_slider{
    -webkit-appearance: none !important;
    background: url(../img2/sound_slider.png) no-repeat 0 0;
    width: 956px;
	height: 56px;
}

.sound_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: url(../img2/sound_slider_thumb.png) no-repeat 0 0;
    width: 132px;
	height: 114px;
	border: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;	
}

.page_title{
	position: absolute; 
	left: 122px; 
	top: 266px;
	background: url(../img2/page_title.png) no-repeat 0 0;
    width: 1322px;
	height: 272px;
	font: 170px Alexandra;
	text-align: center;
	padding-top: 20px;
}

.txt_title{
	font: bold 48px Candara;
	color: #603813;
}

.txt_words_info{
	width: 1132px;
	color: #C69C6D;
	font: bold 60px Candara;
	text-align: center;
}

.bag{
	float: left;
	background: url(../img2/bag_blue.png) no-repeat 0 0;
	width: 176px;
	height: 228px;
	text-align: center;
	font: bold italic 90px Calibri;
	line-height: 260px;
}

#circle_table{
	position: absolute; 
	left: 170px; 
	top: 1580px;
	width: 192px;
	height: 192px;
	border-radius: 96px; 
	background-color: #B4B4B4;	
}

.circle_player{
	position: absolute; 
	width: 52px;
	height: 52px;
	border-radius: 26px; 
	background-color: #B4B4B4;
	opacity: 0.3;
}

.circle_player.active{
	opacity: 1;
}

.gameDialog{
	display: none;
	position: absolute;
	margin: 0px auto;
	/*background: url(../img2/dialog_back.png) no-repeat 0 0;*/
	width: 1346px;
	height: 1340px;
	top: 280px;
	left: 100px;
}

.gameDialog.active{
	display: block;
}

#gameDialogBlock{
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
}

#dialog_title{
	position: absolute;
	font: 260px Alexandra;
	text-align: center;	
	width: 100%;
	color: white;
}

#dialog_text{
	position: absolute;
	left: 120px;
	top: 500px;
	font: bold italic 70px Calibri;	
	width: 1080px;
	color: white;	
}

#results th{
	font: 36px Calibri;
	color: #534741;
}

#results td{
	height: 126px;
}

.playersResult{
	width: 100%;
	height: 94px;
	border-radius: 12px; 
	background-color: #976828;
	font: 36px Calibri;
	color: white;
	padding-top: 6px;
}

.playersResult div.name{
	margin-left: 24px; 
	width: 560px; 
	float: left;
}

.playersResult div.total{
	width: 116px; 
	float: left; 
	text-align: center;
}

.totalResult{
	width: 80px;
	height: 80px;
	border-radius: 12px;
	background-color: #D2A972;
	color: white;
	font: bold 56px Calibri;	
	line-height: 80px;
	border-width: 2px;
	border-style: solid;
	border-color: #B27136;	
}


.alertDialog{
	display: none;
	position: absolute;
	/*background: url(../img2/ep_dialog_back.png) no-repeat 0 0;*/
	width: 1200px;
	height: 600px;
	top: 600px;
	left: 166px;
}

.alertDialog.active{
	display: block;
}

#epDialogBlock{
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
}

.alertText{
	position: absolute;
	left: 100px;
	top: 100px;
	font: bold italic 70px Calibri;
	width: 1000px;
	color: white;
	text-align: center;	
}

.sound_check{
	width: 156px;
	height: 96px;
	background: url(../img2/sound.png) no-repeat 0 0;
}

.sound_check.active{
	background-position: 0px -96px;
}

.block{
	position: absolute;
}

.rule_box{
	width: 1346px;
	height: 1340px;
	/*background: url(../img2/rule_box.png) no-repeat 0 0;*/
}

.rule_text{
	position: absolute; 
	left: 62px; 
	top: 86px;
	width: 1200px;
	font: italic 36px Candara;
}

.bg{
	position: absolute;
	background-image: url(../img2/bgx.png);
	background-repeat: repeat;
	width: 100%; 
	height: 2048px;
}

.content{
	border-radius: 50px; 
	border-width: 3px; 
	border-style: solid; 
	border-color: white; 
	opacity: 0.8;
	background-image: 
		-webkit-linear-gradient(
			bottom, 
			rgb(250,195,81) 0%, 
			rgb(199,140,51) 50%, 
			rgb(154,91,30) 100%
		);
}

.content.fill{
	opacity: 1;
}

.mainbtn{
	position: absolute; 
	border-radius: 40px; 
	border-width: 1px; 
	border-style: solid;
	border-color: #C69C6D; 
	background-image: 
		-webkit-linear-gradient(
			bottom, 
			rgba(248,194,80, 0.6) 0%, 
			rgba(199,140,51, 0.6) 50%, 
			rgba(154,91,30, 0.6) 100%
		);	
	-webkit-box-shadow:5px 5px 10px 0px rgba(153, 89, 31, 0.8);	
	font: bold 105px Candara;
	color: white;
	text-align: center;			
	text-shadow: 5px 2px #8C6239;
	padding-top: 5px;
}

.btn{
	position: absolute; 
	border-radius: 22px; 
	border-width: 2px; 
	border-style: solid;
	border-color: #8B6138; 
	background-image: 
		-webkit-linear-gradient(
			bottom, 
			rgb(248,194,80) 0%, 
			rgb(199,140,51) 50%, 
			rgb(154,91,30) 100%
		);	
	font: bold 95px Candara;
	color: white;
	text-align: center;			
	text-shadow: 5px 2px #8C6239;
}


